<template>
  <div class="condition-node">
    <div class="condition-node-wrap">
      <div :class="{'is-error': node.isError, 'is-disabled': disabled}" class="condition-wrap" @click="click">
        <div class="header">
          <el-input
            v-if="isEdit"
            ref="wkFlowInput"
            v-model="node.conditionName"
            type="text"
            size="mini"
            maxlength="20"
            @blur="nameInputBlur" />
          <span
            v-else
            class="title"
            @click.stop="titleEditClick">{{ node.conditionName }}</span>
          <span
            class="priority">{{ $t('components.ApprovalFlow.796625af97f253904318ef9d3b660a33',{1: index + 1 }) }}</span>
          <i
            v-if="!disabled"
            class="wk wk-copy"
            @click.stop="copyClick" />
          <i
            v-if="!disabled"
            class="el-icon-close close"
            @click.stop="deleteClick" />
        </div>
        <div class="content">
          <template v-if="node.conditionDataList && node.conditionDataList.length > 0">
            <span
              v-for="(children, childrenIndex) in node.conditionDataList"
              :key="childrenIndex">
              <template v-if="Array.isArray(children)">
                <span
                  v-for="(item, itemIndex) in children"
                  :key="itemIndex">
                  <span v-if="item.conditionType === 8">{{ $t('components.ApprovalFlow.17592ef99dfd91d17cf301c80ef77161',{1:item.name}) }}<template
                    v-for="(dep, depIndex) in item.deptList">
                    <wx-open-data :key="`dep${itemIndex}-${depIndex}`" :openid="dep.name" type="departmentName" /><template v-if="item.deptList.length - 1 > depIndex ">{{ $t('components.ApprovalFlow.0d227e46f39856b7a65eefc7388328d1') }}</template>
                  </template>{{ `${item.deptList.length > 0 && item.userList.length > 0 ? $t('components.ApprovalFlow.121334a53fc55fa383327a9b0a434561') : ''}` }}<template
                    v-for="(user, userIndex) in item.userList">
                    <wx-open-data :key="`user${itemIndex}-${userIndex}`" :openid="user.realname" /><template v-if="item.userList.length - 1 > userIndex ">{{ $t('components.ApprovalFlow.3094b30685983d18ec0d35062833fd66') }}</template>
                  </template>{{ `${item.userList.length > 0 && item.roleList.length > 0 ? $t('components.ApprovalFlow.1ad5a0f3c6f2629baf2ab27ede020455') : ''}${item.roleList.map(item => item.roleName).join($t('components.ApprovalFlow.6ad2f100c4e527efaef5ff01213ed07c'))}` }}</span>
                  <template v-else>{{ getItemDes(item) }}</template><span v-if="itemIndex < children.length - 1" class="interval">并且</span>
                </span>
                <span v-if="childrenIndex < node.conditionDataList.length - 1" class="interval">{{ $t('components.ApprovalFlow.f748f11398f3578c288404350a5ee393') }}</span>
              </template>
            </span>
          </template>
          <template v-else>
            {{ $t('components.ApprovalFlow.0b48e4122234216886b1dc527d453633') }}
          </template>
        </div>
        <div v-if="modal" class="wk-flow-modal" />
      </div>
      <add-node-btn @command="handleCommand" />
    </div>
  </div>
</template>

<script>
import AddNodeBtn from './AddNodeBtn'

import { examineModel, conditionListModel, copyModel } from './flowModel'
import { objDeepCopy } from '@/utils'
import {
  selectOptions,
  checkboxOptions,
  numberOptions,
  numberValueOptions,
  getOptionObj
} from './conditioModel'
import { isEmpty } from '@/utils/types'

export default {
  // 条件
  name: 'WkConditionNode',

  components: {
    AddNodeBtn
  },

  inject: ['WkApproveFlow'],

  props: {
    index: Number,
    disabled: {
      type: Boolean,
      default: false
    },
    modal: {
      type: Boolean,
      default: false
    }, // 是否需要遮罩层
    parent: Array,
    conditionParent: Array,
    node: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      selectOptionsObj: getOptionObj(selectOptions),
      checkboxOptionsObj: getOptionObj(checkboxOptions),
      numberOptionsObj: getOptionObj(numberOptions),
      numberValueOptionsObj: getOptionObj(numberValueOptions),
      isEdit: false
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  beforeDestroy() {},

  methods: {
    /**
     * 输入失去焦点
     */
    nameInputBlur() {
      this.isEdit = false
      if (this.node.conditionName === '') {
        this.node.conditionName = this.$t('components.ApprovalFlow.04ec2c8318c3ce0f36395bd375310ec7')
      }
    },

    /**
     * 编辑名称
     */
    titleEditClick() {
      if (!this.disabled) {
        this.isEdit = true
        this.$nextTick(() => {
          this.$refs.wkFlowInput.focus()
        })
      }
    },

    /**
     * 删除
     */
    deleteClick() {
      this.$emit('delete')
    },

    /**
     * 添加
     */
    handleCommand(command) {
      if (command === 'approve') {
        this.parent.splice(0, 0, objDeepCopy(examineModel))
      } else if (command === 'condition') {
        const removeItems = this.parent.splice(0)
        const copyConditionListModel = objDeepCopy(conditionListModel)
        copyConditionListModel.conditionList[1].examineDataList = removeItems
        this.parent.push(copyConditionListModel)
      } else if (command === 'copy') {
        this.parent.splice(this.index + 1, 0, objDeepCopy(copyModel))
      } else if (command === 'paste') {
        const pasteNode = objDeepCopy(objDeepCopy(this.WkApproveFlow.eventObj.copy?.node || examineModel))
        pasteNode.name = `${pasteNode.name}（复制）`
        this.parent.unshift(pasteNode)
      }
    },

    /**
     * @description: 复制条件节点链
     * @return {*}
     */
    copyClick() {
      const copyNode = objDeepCopy(this.node)
      copyNode.conditionName = `${copyNode.conditionName}（复制）`
      this.conditionParent.splice(this.index + 1, 0, copyNode)
    },

    /**
     * 点击
     */
    click() {
      if (!this.disabled) {
        this.$emit('node-click', this.$props)
      }
    },

    /**
     * 获得条件内容
     */
    getConditonContent() {
      const conditionDataList = this.node.conditionDataList

      return conditionDataList.map(children => {
        return this.getSectionConditionDes(children)
      }).join(' 或 ')
    },

    /**
     * @description: 获取条件描述
     * @return {*}
     */
    getSectionConditionDes(children) {
      if (!Array.isArray(children)) return ''
      return children.map(item => {
        if (item.type === 3) {
          let values = item.values
          if (item.setting) {
            const showValues = []
            item.setting.forEach(setting => {
              if (setting.value != undefined && item.values.includes(setting.value)) {
                showValues.push(setting.label)
              }
            })
            if (showValues.length > 0) {
              values = showValues
            }
          }
          return `${item.name} ${this.selectOptionsObj[item.conditionType]} ${values.join('或')}`
        } else if (item.type === 9) {
          return `${item.name} ${this.checkboxOptionsObj[item.conditionType]} ${item.values.join('、')}`
        } else {
          if (item.conditionType === 6) {
            return `${isEmpty(item.leftValue) ? '' : item.leftValue} ${this.numberValueOptionsObj[item.leftCondition]} ${item.name} ${this.numberValueOptionsObj[item.rightCondition]} ${isEmpty(item.rightValue) ? '' : item.rightValue}`
          } else if (item.conditionType === 8) {
            return `${item.name}属于 ${item.deptList.map(item => item.name).join('或')}${item.deptList.length > 0 && item.userList.length > 0 ? '或' : ''}${item.userList.map(item => item.realname).join('或')}${item.userList.length > 0 && item.roleList.length > 0 ? '或' : ''}${item.roleList.map(item => item.roleName).join('或')}`
          } else {
            return `${item.name} ${this.numberOptionsObj[item.conditionType]} ${item.values}`
          }
        }
      }).join(' 并且 ')
    },

    /**
     * @description: 获取项描述 上面两个方法无效
     * @param {*} item
     * @return {*}
     */
    getItemDes(item) {
      if (item.type === 3) {
        let values = item.values
        if (item.setting) {
          const showValues = []
          item.setting.forEach(setting => {
            if (setting.value != undefined && item.values.includes(setting.value)) {
              showValues.push(setting.label)
            }
          })
          if (showValues.length > 0) {
            values = showValues
          }
        }
        return `${item.name} ${this.selectOptionsObj[item.conditionType]} ${values.join(this.$t('components.ApprovalFlow.f0b05ded054478b434f5fbd679663276'))}`
      } else if (item.type === 9) {
        return `${item.name} ${this.checkboxOptionsObj[item.conditionType]} ${item.values.join('、')}`
      } else {
        if (item.conditionType === 6) {
          return `${isEmpty(item.leftValue) ? '' : item.leftValue} ${this.numberValueOptionsObj[item.leftCondition]} ${item.name} ${this.numberValueOptionsObj[item.rightCondition]} ${isEmpty(item.rightValue) ? '' : item.rightValue}`
        } else if (item.conditionType === 8) {
          return this.$t('components.ApprovalFlow.f6d9c1477e7e29683336e68c45dbb46f', { 1: item.name, 2: item.deptList.map(item => item.name).join(this.$t('components.ApprovalFlow.8ea74eef74f80ba49bc3eabfe8b3a5fa')), 3: item.deptList.length > 0 && item.userList.length > 0 ? this.$t('components.ApprovalFlow.041e8929a219c8f1e8a89a8abc345d81') : '', 4: item.userList.map(item => item.realname).join(this.$t('components.ApprovalFlow.2d3a9c03c4bba7aa42c9f3fc8b9dd6e6')), 5: item.userList.length > 0 && item.roleList.length > 0 ? this.$t('components.ApprovalFlow.bebbec5c1ad2f0e9c7de1ec2187053dc') : '', 6: item.roleList.map(item => item.roleName).join(this.$t('components.ApprovalFlow.2256152b9a43aca585a7c7cce5ba1059')) })
        } else {
          return `${item.name} ${this.numberOptionsObj[item.conditionType]} ${item.values}`
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.interval {
  margin: 0 4px;
}
</style>
